<template>
    <div class="success">
        <div class="success-wrapper">
            <div class="top-img">
                <!--img src="../../common/image/order_success.jpg" width="120" height="120"-->
                <i class="icon iconfont icon-task_fill"></i>
            </div>
            <div class="success-text">
                <p class="text-top">下单成功</p>
                <p class="text-middle">为了快速收款，请您尽快邮寄您的手机！</p>
                <p class="text-bottom">
                    <i class="icon iconfont icon-prompt_fill"></i>
                    请您前往订单详情页面填写邮寄信息！
                </p>
            </div>
            <div class="success-btn">
                <div class="btn">
                    <router-link tag="div" :to="'/hsqlogin/hsqcenter/hsqdetail?order_code='+order_code" class="text tolook" :class="{'active':active==1}" @click="active=1">查看订单</router-link>
                </div>
                <div class="btn">
                    <router-link tag="div" :to="'/hsindex'" class="text toindex" :class="{'active':active==2}" @click="active=2">去首页</router-link>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
    export default {
        data() {
            return {
                order_code: this.$route.query.order_code,         //订单编号
                active:0,           //点亮按钮
            }
        },
        props: {},
        created() {
            console.log(this.order_code)
        },
        methods:{

        }
    }

</script>
<style  lang="less" scoped>
    @import "../../common/less/variable.less";

    .success{
        position:fixed;
        width:100%;
        height:100%;
        // background:@color-gray-bg;
        overflow:hidden;
        .success-wrapper{
            position:fixed;
            top:50%;
            left:50%;
            transform:translate(-50%,-60%);
            text-align:center;
            width:80%;
            .top-img{
                i{
                    font-size:150px;
                    color:@color-blue;
                }
            }
            .success-text{
                .text-top{
                    font-size:16px;
                    color:@color-alert-con;
                    line-height:30px;
                }
                .text-middle{
                    font-size:14px;
                    color:@color-alert-title;
                    line-height:15px;
                    padding:10px 0 10px;
                }
                .text-bottom{
                    i{
                        font-size:20px;
                        vertical-align:middle;
                    }
                    font-size:12px;
                    color:@color-red;
                }
            }
            .success-btn{
                display:flex;
                padding:0 10px;
                .btn{
                    flex:1;
                    padding:20px 7px;
                    .text{
                        font-size:14px;
                        height:35px;
                        line-height:35px;
                        color:@color-alert-title;
                        border:1px solid #e0e0e1;
                        border-radius:@border-alert-radius;
                        background:#fff;
                        &.tolook{
                            border-color:@color-blue;
                            color:@color-blue;   
                        }
                        &.tolook.active{
                            color:#fff;   
                            background:@color-blue
                        }
                        &.toindex.active{
                            border-color:@color-blue;
                            color:#fff;   
                            background:@color-blue 
                        }
                    }
                }
            }
        }
    }
</style>
